<template>
	<view class="mine">
		<app-title titleBackground="#8D84FF" ::lefticonSize='0' text="我的" color="#fff"></app-title>
		<view class="mine_box">
			<view class="mine_box_scroll">
				<view class="mine_box_scroll_top">
					<view class="mine_box_scroll_top_centrer">
						<image class="mine_box_scroll_top_centrer_image"
							:src="res.avatar !== ''?res.avatar:'../../static/login/logo.png'" mode=""></image>
						<view class="mine_box_scroll_top_centrer_xinxi">
							<p>{{res.realname}}</p>
							<view class="mine_box_scroll_top_centrer_xinxi_dengji">
								<image class="mine_box_scroll_top_centrer_xinxi_dengji_img"
									src="../../static/mine/LV.png" mode=""></image>
								{{res.levelname}}
							</view>
						</view>
						<view class="mine_box_scroll_top_centrer_id">
							<p>ID：{{res.id}}</p>
							<p>{{res.mobile}}</p>
						</view>
					</view>
				</view>
				<view class="mine_box_scroll_wodedingdan">
					<view class="mine_box_scroll_wodedingdan_top"
						@click="gotoFun('/pages/mine/wodedingdan/wodedingdan')">
						<view class="mine_box_scroll_wodedingdan_top_left">
							我的订单
						</view>
						<view class="mine_box_scroll_wodedingdan_top_right">
							查看全部订单
							<uni-icons type="right" color="#999"></uni-icons>
						</view>
					</view>
					<view class="mine_box_scroll_wodedingdan_bottom">
						<view class="mine_box_scroll_wodedingdan_bottom_item" v-for="(item,index) in orderlist"
							:key="index" @click="gotoFun(item.pages)">
							<image :src="item.img" mode="heightFix"></image>
							<p>{{item.title}}</p>
						</view>
					</view>
				</view>
				<view class="mine_box_scroll_narong">
					<view class="mine_box_scroll_narong_item" v-for="(item,index) in list" :key="index"
						@click="gotoFun(item.pages)">
						<view class="mine_box_scroll_narong_item_left">
							<image :src="item.img" mode="widthFix"></image>
							<p>{{item.title}}</p>
						</view>
						<view class="mine_box_scroll_narong_item_right">
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
				</view>
				<view class="tuichulogo" @click="istuichuopen">
					退出
				</view>
			</view>
		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="通知" content="确认要退出登录吗？"
				@confirm="quitloginFun" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<app-tab :tabIndex='4'></app-tab>
	</view>
</template>

<script>
	import appTitle from "@/components/appTitle.vue";
	import appTab from "@/components/appTab.vue";
	import {
		member
	} from "@/api/wallet.js";
	export default {
		components: {
			appTitle,
			appTab
		},
		data() {
			return {
				res: '',
				orderlist: [{
					img: '../../static/mine/daishoukuan.png',
					title: '待付款',
					pages: '/pages/mine/wodedingdan/wodedingdan?type=0'
				}, {
					img: '../../static/mine/daifahuo.png',
					title: '待发货',
					pages: '/pages/mine/wodedingdan/wodedingdan?type=1'
				}, {
					img: '../../static/mine/yiwancheng.png',
					title: '已完成',
					pages: '/pages/mine/wodedingdan/wodedingdan?type=3'
				}, {
					img: '../../static/mine/shouhou.png',
					title: '退款/售后',
					pages: ''
				}],
				list: [{
					img: '../../static/mine/shequ.png',
					title: '我的社区',
					pages: '/pages/mine/mineCommunity/mineCommunity'
				}, {
					img: '../../static/mine/daifahuo.png',
					title: '地址管理',
					pages: '/pages/mine/dizhiguanli/dizhiguanli'
				}, {
					img: '../../static/mine/dizhi.png',
					title: '我的银行卡',
					pages: '/pages/mine/addyinhangka/addyinhangka'
				}, {
					img: '../../static/mine/shiming.png',
					title: '实名认证',
					pages: ''
				}, {
					img: '../../static/mine/mima.png',
					title: '密码设置',
					pages: ''
				}, {
					img: '../../static/mine/pingtaixieyi.png',
					title: '平台协议',
					pages: ''
				}, {
					img: '../../static/mine/banbenhao.png',
					title: '版本号',
					pages: ''
				}]
			};
		},
		onShow() {
			uni.hideTabBar();
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.memberFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			gotoFun(url) {
				if (url !== '') {
					uni.navigateTo({
						url
					})
				} else {
					this.showinteraction('暂未开放')
				}
			},
			async memberFun() {
				let data = await member(this.openid);
				this.res = data;
				console.log(data);
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			istuichuopen() {
				this.$refs.alertDialog.open()
			},
			dialogClose() {},
			quitloginFun() {
				this.showinteraction('退出成功');
				setTimeout(() => {
					uni.clearStorage();
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 2000)
			},
		}
	}
</script>

<style lang="scss">
	.mine {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #eeebf7;


		.mine_box {
			width: 100%;
			flex: 1;
			overflow-y: auto;

			.mine_box_scroll {
				width: 100%;
				// height: 200vh;

				.mine_box_scroll_top {
					width: 100%;
					height: 256rpx;
					background-color: #8D84FF;
					display: flex;
					align-items: flex-end;
					padding: 0 50rpx 95rpx 50rpx;

					.mine_box_scroll_top_centrer {
						width: 100%;
						height: 130rpx;
						background-color: #000;
						display: contents;
						color: #fff;

						.mine_box_scroll_top_centrer_image {
							width: 122rpx;
							height: 122rpx;
							border-radius: 122rpx;
							// background-color: #fff;
						}

						.mine_box_scroll_top_centrer_xinxi {
							// width: 250rpx;
							height: 100%;
							// text-align: center;
							display: flex;
							flex-direction: column;
							// align-items: center;
							padding-left: 20rpx;
							justify-content: flex-end;
							color: #fff;

							p {
								font-size: 28rpx;

							}

							.mine_box_scroll_top_centrer_xinxi_dengji {
								width: 176rpx;
								height: 44rpx;
								border-radius: 44rpx;
								background-color: rgba(255, 255, 255, .6);
								margin-top: 18rpx;
								font-size: 28rpx;
								text-align: center;
								position: relative;

								.mine_box_scroll_top_centrer_xinxi_dengji_img {
									width: 36rpx;
									height: 36rpx;
									position: absolute;
									top: 4rpx;
									left: 10rpx;
									// background-color: #000;
									// border-radius: 30rpx;
								}
							}
						}

						.mine_box_scroll_top_centrer_id {
							font-size: 28rpx;
							padding-left: 20rpx;
						}
					}
				}

				.mine_box_scroll_wodedingdan {
					width: 700rpx;
					height: 230rpx;
					margin: -50rpx auto 0 auto;
					background-color: #fff;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;

					.mine_box_scroll_wodedingdan_top {
						width: 100%;
						height: 80rpx;
						padding: 0 40rpx;
						display: flex;
						justify-content: space-between;

						.mine_box_scroll_wodedingdan_top_left {
							line-height: 80rpx;
							font-size: 28rpx;
						}

						.mine_box_scroll_wodedingdan_top_right {
							font-size: 24rpx;
							color: #999;
							display: flex;
							align-items: center;
						}
					}

					.mine_box_scroll_wodedingdan_bottom {
						width: 100%;
						flex: 1;
						display: flex;
						justify-content: space-between;

						.mine_box_scroll_wodedingdan_bottom_item {
							width: 25%;
							height: 100%;
							text-align: center;
							font-size: 22rpx;
							color: #333333;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							image {
								height: 52rpx;
							}

							p {
								margin-top: 10rpx;
							}
						}
					}
				}

				.mine_box_scroll_narong {
					width: 700rpx;
					height: 640rpx;
					background-color: #fff;
					border-radius: 20rpx;
					margin: 30rpx auto;

					.mine_box_scroll_narong_item {
						width: 100%;
						height: 90rpx;
						border-bottom: 1rpx solid #f5f5f5;
						display: flex;
						align-items: center;
						padding: 20rpx;
						justify-content: space-between;
						color: #505050;

						.mine_box_scroll_narong_item_left {
							display: flex;

							image {
								width: 40rpx;
								height: 40rpx;
							}

							p {
								padding: 0 30rpx;
							}
						}
					}
				}

				.tuichulogo {
					width: 585rpx;
					height: 94rpx;
					border-radius: 94rpx;
					background-color: #856fff;
					margin: 0 auto 30rpx auto;
					text-align: center;
					font-size: 35rpx;
					color: #fff;
					line-height: 94rpx;
				}
			}
		}
	}
</style>